<script setup>
import {onMounted, ref} from "vue";
import {copyTemplateApi, getHotTemplateApi} from "../../apis/TemplateApi.js";
import __ from 'lodash'
import {goPreviewSurveys} from "../../utils/CommonsUtil.js";
import {Message} from "@arco-design/web-vue";
import useStore from "../../store/index.js";
const defaultBg = new URL('../../assets/default-bg.png', import.meta.url).href;

import banner3 from '../../assets/banner3.png';
import banner1 from '../../assets/banner1.png';
import banner2 from '../../assets/banner2.png';

const images = [banner3, banner1, banner2];

const getImages = (bgimg) => {

    console.log('bgimg',bgimg,__.isEmpty(bgimg))
    let s =  {
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        backgroundImage: bgimg ? "url(" + bgimg + ")": `url(${defaultBg})`
    }
    if ("../../assets/default-bg.png" === bgimg){
        s.backgroundImage = `url(${defaultBg})`
    }
    return s
};
const page = ref(1)
const size = ref(10)
const store = useStore()
const isShowCopy = ref(false)
const copyTemplateTitle = ref('')
const copyTemplateId = ref('')
const hotTemplateList = ref([])
const getHotTemplateList = async () => {
    const res = await getHotTemplateApi(page.value,size.value)
    hotTemplateList.value = res.data.records
}
const copyTemplateClick = async () => {
    const res = await copyTemplateApi({
        id: copyTemplateId.value,
        title: copyTemplateTitle.value
    })
    if (res.code === 0) {
        Message.success('复制成功');
        isShowCopy.value = false
        copyTemplateId.value = ''
        //1秒后跳转回问卷页面
        setTimeout(() => {
            router.push("/surveys")
        }, 1000);
    } else {
        Message.error(res.message);
    }
}
const openCopy = (id) => {
    if (!store.userIsLogin){
        return Message.error('请先登录');
    }
    copyTemplateId.value = id
    isShowCopy.value = true
}

onMounted(() => {
    getHotTemplateList()
})
</script>

<template>
    <a-carousel
        :style="{
      width: '60%',
      height: '280px',
      margin: '36px auto',
      borderRadius: '8px',
      overflow: 'hidden',
    }"
        :auto-play="true"
        indicator-type="dot"
        show-arrow="hover"
    >
        <a-carousel-item v-for="img in images">
            <img
                :src="img"
                :style="{
                    objectFit: 'cover',
                  width: '100%',
                }"
            />
        </a-carousel-item>
    </a-carousel>

    <h2 style="font-size: 18px" class="ml-24">热门模板</h2>
    <a-row class="flex-wrap flex justify-around ml-24 mt-4">
        <a-col :span="5" v-for="item in hotTemplateList" class="mb-4" >
            <div class="hotf border border-gray-300 w-36 h-56 rounded mx-auto cursor-pointer"
                 :style="getImages(item.bgimg)">
                <div class="hots w-20 mx-auto pt-16">
                    <a-button type="primary" class="w-20 mb-4" @click="goPreviewSurveys(item.id)">预览</a-button>
                    <a-button type="primary" class="w-20" @click="openCopy(item.id)">引用</a-button>
                </div>
            </div>
            <p class="text-center">{{item.title}}</p>
        </a-col>
    </a-row>

    <a-modal v-model:visible="isShowCopy" @ok="copyTemplateClick" >
        <template #title>
            确认复制问卷吗？
        </template>
        <div class="mb-2">请输入问卷标题</div>
        <a-input v-model="copyTemplateTitle"  placeholder="请输入问卷标题" allow-clear />
    </a-modal>
</template>

<style scoped>
.hots{
    display: none;
}

.hotf:hover .hots{
    display: block;
}

</style>
